<template>
    <div class="associate-wrap">
        <el-row :gutter="20">
            <el-col :span="10">
                <el-form ref="mform" :label-width="formLabelWidth" size="small">
                    <el-form-item label="角色名" prop="name" >
                        {{form.name}}
                    </el-form-item>
                    <el-form-item label="状态">
                        <template v-if="form.status == 2">已禁用</template>
                        <template v-else-if="form.status == 1">已删除</template>
                        <template v-else>启用</template>
                    </el-form-item>
                    <el-form-item label="菜单" prop="status">
                        <div class="role-menu-tree">
                            <el-tree ref="menutree"
                                     :data="items"
                                     show-checkbox
                                     node-key="tid"
                                     :default-expanded-keys="expandedKeys"
                                     :default-checked-keys="checkedKeys"
                                     :props="treeSetting">
                            </el-tree>
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="14">
                <div style="font-size:13px;color:#999; margin-bottom: 10px;">有【{{form.name}}】角色的管理员：</div>
                <div class="associate-table-wrap">
                    <el-table
                        :data="list"
                        height="450"
                        row-key="id">
                        <el-table-column
                            prop="admin.loginname"
                            label="登录名">
                        </el-table-column>
                        <el-table-column
                            prop="admin.nickname"
                            label="昵称">
                        </el-table-column>
                        <el-table-column
                            prop="type"
                            label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="handleRemove(scope.row, scope.$index)">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-pagination
                    @size-change="refresh"
                    @current-change="refresh"
                    :current-page.sync="pagination.current"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size.sync="pagination.pageSize"
                    layout="total, prev, pager, next"
                    :total="pagination.total">
                </el-pagination>
            </el-col>
        </el-row>
        <div class="btns" style="text-align: right;">
            <el-button type="primary" @click="close()">确 定</el-button>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import axios from 'axios';
    import cCreate from './create';

    export default {
        props: [ 'rid', 'show' ],
        data() {
            return {
                formLabelWidth: '80px',
                items: [],
                loading: false,

                form: {
                    name: '',
                    status: "0",
                },
                expandedKeys: [],
                checkedKeys: [],
                treeSetting: {
                    children: 'subs',
                    label: 'name'
                },

                list: [],
                loading: false,
                pagination: {
                    current: 1,
                    pageSize: 10,
                    total: 0
                },
            }
        },
        components: {

        },
        created: function () {
            // this.pid = this.$route.query.pid;
        },
        mounted: function () {
            // this.groupId = this.$route.params.groupId;
            // this.init();
            this.init();
        },
        watch: {
            'show'(val) {
                if(val) {
                    this.init();
                }
            }
        },
        computed: {
            ...mapState([

            ]),
        },
        methods: {
            ...mapActions([
            ]),
            init() {
                this.initInfo();
                this.pagination.current = 1;
                this.refresh();
            },
            async initInfo() {
                if(this.rid) {
                    // this.$refs.mform && this.$refs.mform.resetFields();
                    let data = await this.$japi.role.getRole(this.rid, { disabled: true });

                    if(data) {
                        this.form = data;
                        this.items = _.get(data, 'menutree.items', []);
                        this.checkedKeys = _.get(data, 'menutree.selected', []);
                        this.refreshData();
                    }
                }
            },
            async refresh() {
                let data = await this.$japi.role.getRoleUsers(this.rid, {
                    page: this.pagination.current,
                    pageSize: this.pagination.pageSize
                });

                if(data) {
                    this.pagination.total = data.count;
                    this.list = data.rows || [];
                }
            },
            refreshData() {

                if(this.items && this.items.length) {
                    for(let i = 0; i < this.items.length; i++) {
                        this.items[i].disabled = true;
                        let it = this.items[i];
                        this.expandedKeys.push(it.tid);
                    }
                }

            },
            async _remove(id) {

                let ret = await this.$japi.role.disassociateUsers(id);

                if(ret) {
                    this.refresh();
                }
            },
            handleRemove(it) {

                if(!it || !it.id) {
                    return;
                }
                this.$confirm(`此操作将移除该用户【${it.admin.nickname}】, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this._remove(it.id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            close(flag) {
                this.$emit('close', flag);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .associate-wrap .el-form-item {
        margin-bottom:0px;
    }
    .associate-table-wrap {
        border: 1px solid #EEE;

        thead .el-checkbox {
            margin-bottom:0px;
        }
    }
</style>
